<template>
  <v-chart ref="vChartRef" :option="option" autoresize class="chart"></v-chart>
</template>

<script setup>
import { ref, defineProps, defineExpose } from "vue";
import VChart, { THEME_KEY } from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import {
  DatasetComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
} from "echarts/components";

const option = ref({
  grid: {
    left: "10%",
    right: "10%",
    bottom: "10%",
    top: "10%",
    containLabel: true,
  },
  tooltip: {
    show: true,
    trigger: "axis",
  },
  xAxis: {
    show: true,
    type: "category",
    data: [],
    axisLabel: {
      inside: false, // 标签刻度朝内
      textStyle: {
        align: "center", // 文字右对齐
        color: "#ffffff",
      },
    },
  },
  yAxis: {
    show: true,
    type: "value",
    axisLabel: {
      inside: false, // 标签刻度朝内
      textStyle: {
        align: "center", // 文字右对齐
        color: "#ffffff",
      },
    },
  },
  series: [],
});
use([
  DatasetComponent,
  CanvasRenderer,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
]);
const setData = (data) => {
  option.value = {
    grid: {
      left: "5%",
      right: "5%",
      bottom: "5%",
      top: "12%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        show: true,
        type: "shadow",
      },
    },
    xAxis: {
      show: true,
      type: "category",
      data: data.yAxis,
      axisLabel: {
        inside: false, // 标签刻度朝内
        textStyle: {
          align: "center", // 文字右对齐
          color: "#888",
        },
      },
    },
    yAxis: {
      show: true,
      type: "value",
      axisLabel: {
        inside: false, // 标签刻度朝内
        textStyle: {
          align: "center", // 文字右对齐
          color: "#888",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#888",
          type: "solid",
        },
      },
    },
    series: [data.data],
  };
};
defineExpose({
  setData,
});
</script>

<style scoped>
.chart {
  height: 200px;
}
</style>
